<template>
	<view class="body">
		<view v-if="!token" style="padding-top:40vh ;">
			<u-empty mode="permission" text='请先登录 '>
			</u-empty>
		</view>
		<template v-else>
			<view class="tabBox">
				<filter @reload='reload' />
			</view>
			<z-paging @scroll='scroll' :refresher-enabled='refresher_enabled' ref="paging" style="height: 100%;"
				:fixed="false" v-model="data" @query="query" :default-page-no="1" :default-page-size="10" :auto='false'>
				<active @refresher_enabled_change='refresher_enabled_change' @loadingChange='loading=!loading'
					@reload='reload' :playIndex='playIndex' ref='active' :loading='loading' :active='data' />
			</z-paging>
		</template>
	</view>
</template>

<script>
	import filter from '@/components_company/filter.vue'
	import active from './components/active'
	export default {
		components: {
			active,
			filter
		},
		data() {
			return {
				playIndex: 0,
				loading: true,
				data: [],
				refresher_enabled: true,
				status: [],
				decorate_id: null,
				user_id: null,
				process_id: null,
				authorizer_id: null,
				token: uni.getStorageSync('token')
			}
		},
		mounted() {
			if(this.token){
				this.query(1,10)
			}
		},
		methods: {
			scroll(e) {
				const top = e.detail.scrollTop
				let index = 0
				let domTop0 = 0
				const query = uni.createSelectorQuery().in(this.$refs.active);
				query.selectAll('.activeBox').boundingClientRect(data => {
					data.forEach((rect, domIndex) => {
						let domTop = rect.top + top
						if (index == 0) {
							domTop0 = domTop
						}
						if (top > (domTop - domTop0)) {
							index = domIndex
						}
						if (domIndex == data.length - 1) {
							this.playIndex = index

						}
					});
				}).exec();
			},
			refresher_enabled_change(e) {
				this.refresher_enabled = e
			},
			reload(e) {
				if (e) {
					this.status = e.status
					this.decorate_id = e.customer.id
					this.user_id = e.administrator.id
					this.process_id = e.process.id
					this.authorizer_id = e.authorizer.id
				}
				this.$refs.paging.reload()
			},
			query(page, size) {
				let obj = {
					page,
					size,
					status: this.status,
					decorate_id: this.decorate_id,
					user_id: this.user_id,
					process_id: this.process_id,
					authorizer_id: this.authorizer_id
				}
				uni.showLoading({
					title: ' 加载中...'
				})
				if (this.token){
					this.$api_company.Shop.Active(obj).then(res => {
						this.$refs.paging.complete(res.data.activities.data.map(item => {
							return {
								...item,
								customer: res.data.customers[item.customer_id],
								user: res.data.user[item.user_id],
								decorates:res.data.decorates[item.decorate_id]
							}
						}))
						uni.hideLoading()
						this.loading = false
					}).catch(err => {
						uni.hideLoading()
						uni.$u.toast(err.message)
					})
				}else{
					
						uni.hideLoading()
				}
				
			},

		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #f5f5f5;
		padding: 20rpx 0 0 20rpx;
		height: 100%;

	}

	.tabBox {
		width: 100%;
		padding: 0 40rpx 40rpx 0;
		box-sizing: border-box;
	}

	.add {
		position: fixed;
		right: 5vw;
		bottom: 20vh;
		border-radius: 100%;
		box-shadow: 0 0 10rpx #ddd;
		background: rgba(0, 0, 0, 0.7);
		padding: 20rpx;
		z-index: 11;

	}
</style>